<template>
	<view class="content">
		<img class="full" src="../static/result_01.jpg">
		<img class="full" src="../static/result_02.jpg">
		<view class="userBox">
			<img class="full" src="../static/result_03.jpg">
			<view class="userInfo">
				<view><text>命主姓名：</text>宫晓辉</view>
				<view><text>命主性别：</text>男</view>
				<view><text>出生时间：</text>1993-02-18 12:00</view>
			</view>
		</view>
		<img class="full" src="../static/result_04.jpg">
		<img class="margin" src="../static/result_05.jpg">
		<img class="full" src="../static/result_06.jpg" style="width:64%;">
		<img class="full" src="../static/result_07.jpg">

		<!-- 悬浮按钮 -->
		<uni-fab :content="fabcont" horizontal="left"
		 @trigger="fabTrigger"></uni-fab>
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	export default {
		data() {
			return {
				fabcont:[{
					text:"再次测算",
					iconPath:"../static/result_01.png",
					active:false,
					src:"index"
				},{
					text:"历史测算",
					iconPath:"../static/result_03.png",
					active:false,
					src:"orderlist"
				}]
			}
		},
		components: {
			uniFab
		},
		methods:{
			fabTrigger(e){
				this.fabcont.forEach(item=>{item.active = false})
				this.fabcont[e.index].active = true
				uni.navigateTo({
				    url: e.item.src
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		max-width: 600px;
		margin: 0 auto;
	}

	img.full {
		width: 100%;
		height: auto;
		display: block;
	}

	img.margin {
		width: 700rpx;
		height: auto;
	}

	.userBox {
		position: relative;
		display: flex;
		justify-content: center;
		height: 212.56rpx;
	}

	.userInfo {
		position: absolute;
		top: 16rpx;
		color: #815639;
		font-family: kaiti;
		font-size: 34rpx;
		line-height: 1.5;
	}

	.userInfo>view>text {
		color: #933640;
	}
</style>
